<!--
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  Architecture
-->
<style type="text/css">

.span4.node-panel {
  margin-top: 10px;
  margin-left: 10px;
  width: 33%;
}
.node-attributes dl {
  margin-top: 5px;
  margin-bottom: 10px;
}
.node-attributes dt {
  width: 150px;
}
.node-attributes dd {
  margin-left: 160px;
}
.node-attributes dd a {
  /** lets make the destination links wrap */
  -ms-word-break: break-all;
  word-break: break-all;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

ul.viewMenu li {
  padding-left: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
}

div#pop-up {
  display: none;
  position: absolute;
  color: white;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 10px 5px 10px;
  -moz-border-radius: 8px 8px;
  border-radius: 8px 8px;
}

div#pop-up-title {
  font-size: 15px;
  margin-bottom: 4px;
  font-weight: bolder;
}

div#pop-up-content {
  font-size: 12px;
}

rect.graphbox {
  fill: #FFF;
}

rect.graphbox.frame {
  stroke: #222;
  stroke-width: 2px
}

/* only things directly related to the network graph should be here */

path.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

marker.broker {
  stroke: red;
  fill: red;
  stroke-width: 1.5px;
}

circle.broker {
  fill: #0c0;
}

circle.brokerSlave {
  fill: #c00;
}

circle.notActive {
  fill: #c00;
}

path.link.group {
  stroke: #ccc;
}

marker#group {
  stroke: #ccc;
  fill: #ccc;
}

circle.group {
  fill: #eee;
  stroke: #ccc;
}

circle.destination {
  fill: #bbb;
  stroke: #ccc;
}

circle.pinned {
  stroke-width: 4.5px;
}

path.link.profile {
  stroke-dasharray: 0, 2 1;
  stroke: #888;
}

marker#container {
}

circle.container {
  stroke-dasharray: 0, 2 1;
  stroke: #888;
}

path.link.container {
  stroke-dasharray: 0, 2 1;
  stroke: #888;
}

circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
  cursor: pointer;
}

circle.closeMode {
  cursor: crosshair;
}

path.link.destination {
  stroke: #ccc;
}

circle.topic {
  fill: #c0c;
}

circle.queue {
  fill: #00c;
}

circle.consumer {
  fill: #cfc;
}

circle.producer {
  fill: #ccf;
}

path.link.producer {
  stroke: #ccc;
}

path.link.consumer {
  stroke: #ccc;
}

path.link.network {
  stroke: #ccc;
}

circle.selected {
  stroke-width: 3px;
}

.selected {
  stroke-width: 3px;
}

text {
  font: 10px sans-serif;
  pointer-events: none;
}

text.shadow {
  stroke: #fff;
  stroke-width: 3px;
  stroke-opacity: .8;
}
</style>


<div class="row-fluid mq-page" ng-controller="ARTEMIS.BrokerDiagramController">

  <div ng-hide="inDashboard" class="span12 page-padded">
    <div class="section-header">

      <div class="section-filter">
        <input type="text" class="search-query" placeholder="Filter..." ng-model="searchFilter">
        <i class="icon-remove clickable" title="Clear filter" ng-click="searchFilter = ''"></i>
      </div>

      <div class="section-controls">
        <a href="#"
           class="dropdown-toggle"
           data-toggle="dropdown">
          View &nbsp;<i class="icon-caret-down"></i>
        </a>

        <ul class="dropdown-menu viewMenu">
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.consumer"> Consumers
            </label>
          </li>
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.producer"> Producers
            </label>
          </li>
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.address"> Addresses
            </label>
          </li>
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.queue"> Queues
            </label>
          </li>
          <li class="divider"></li>
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.broker"> Brokers
            </label>
          </li>
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.slave"> Slave brokers
            </label>
          </li>
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.network"> Networks
            </label>
          </li>
          <li class="divider"></li>
          <li title="Should we show the details panel on the left">
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.panel"> Details panel
            </label>
          </li>
          <li title="Show the summary popup as you hover over nodes">
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.popup"> Hover text
            </label>
          </li>
          <li title="Show the labels next to nodes">
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.label"> Label
            </label>
          </li>
        </ul>

      </div>
    </div>
  </div>


  <div id="pop-up">
    <div id="pop-up-title"></div>
    <div id="pop-up-content"></div>
  </div>

  <div class="row-fluid">
    <div class="{{viewSettings.panel ? 'span8' : 'span12'}} canvas broker-canvas">
      <div hawtio-force-graph graph="graph" selected-model="selectedNode" link-distance="150" charge="-600" nodesize="10" marker-kind="marker-end"
           style="min-height: 800px">
      </div>
    </div>
    <div ng-show="viewSettings.panel" class="span4 node-panel">
      <div ng-show="selectedNode" class="node-attributes">
        <dl ng-repeat="property in selectedNodeProperties" class="dl-horizontal">
          <dt title="{{property.key}}">{{property.key}}:</dt>
          <dd ng-bind-html-unsafe="property.value"></dd>
        </dl>
      </div>
    </div>
  </div>

  <div ng-include="'app/fabric/html/connectToContainerDialog.html'"></div>

</div>


